<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="杨宁争">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        .all {
            width: 100%;
            float: right;
            margin-right: -570px;
        }

        .tou {
            display: flex;
            justify-content: space-around;
        }

        nav {
            width: 100%;
            /*background-color: greenyellow;*/
            display: flex;
            justify-content: space-around;
            float: right;
        }

        ul li {
            margin: 0;
            padding: 0;
            list-style: none;
            float: left;
            width: 40px;
            color: black;
            font-size: 14px;
            line-height: 16px;
            /*background-color: red;*/
        }

        ul>li>a {

            color: black;
            font-weight: 700;
        }
       .right a{
           color: black;
       }
        .right {

            /*background-color: yellow;*/
            font-size: 14px;
            line-height: 46px;
            width: 400px;
            display: flex;
            justify-content: space-around;
        }

        img {
            margin-left: 440px;
            width: 135px;
            height: 50px;
            margin-top: 35px;
            /*padding-bottom: -20px;*/
        }

        input {
            width: 520px;
            height: 35px;
            border: 1px solid #666;
        }

        button {
            width: 104px;
            height: 40px;
            background-color: #2c88ff;
            margin-left: -10px;
        }

        .bind {
            width: 100%;
            margin: 20px auto;
        }

        .main {
            width: 100%;
            height: 40px;
            background-color: #01214f;
            ;
        }

        .nei {
            display: flex;
            justify-content: space-around;
            line-height: 42px;
            margin-top: 60px;
            width: 1000px;
            margin: 0 auto;
            color: white;
        }

        .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <header>
        <div class="all">
            <nav>
                <div class="tou">
                    <ul>
                        <li> <a href="#">网页</a></li>
                        <li> <a href="#">新闻</a></li>
                        <li> <a href="#">贴吧</a></li>
                        <li> <a href="#">知道</a></li>
                        <li><a href="#">网页</a></li>
                        <li> <a href="#">音乐</a></li>
                        <li> <a href="#">图片</a></li>
                        <li> <a href="#">视频</a></li>
                        <li> <a href="#">文库</a></li>
                    </ul>
                    <div class="right">
                        <span><a href="#">百度首页</a></span>
                        <span><a href="#">年轻就是骄傲ok</a></span>
                        <span><a href="#">百度新闻客户端</a></span>
                    </div>
                </div>
            </nav>
        </div>

        <div class="bind">

            <img src="1.png" alt=""> <input type="" name="" value="">
            <button type="">百度一下</button> <a href="">帮助</a> <a href="">高级搜索</a> <a href="">设置</a>

        </div>

    </header>



    <div class="main">
        <div class="nei">
            <section class="active">首页</section>
            <section>百家号</section>
            <section>国际</section>
            <section>军事</section>
            <section>社会</section>
            <section>财经</section>
            <section>娱乐</section>
            <section>体育</section>
            <section>互联网</section>
            <section>科技</section>
            <section>游戏</section>
            <section>时尚</section>
            <section>女人</section>
            <section>汽车</section>
            <section>个性推荐</section>
            <section>国内</section>
            <section>更多</section>
        </div>
    </div>

    <div class="left">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
    </div>
</body>

</html>